<template>
  <view class="customer-service-container">
    <!-- 微信小程序环境使用客服插件 -->
    <!-- #ifdef MP-WEIXIN -->
    <view class="chatbot-container">
      <chat />
    </view>
    <!-- #endif -->
    
    <!-- 非微信小程序环境显示提示 -->
    <!-- #ifndef MP-WEIXIN -->
    <view class="unsupported-platform">
      <view class="tip-icon">💬</view>
      <text class="tip-text">客服功能仅在微信小程序中可用</text>
      <button class="back-btn" @tap="handleBack">返回首页</button>
    </view>
    <!-- #endif -->
  </view>
</template>

<script>
export default {
  // #ifdef MP-WEIXIN
  usingComponents: {
    "chat": "plugin://chatbot/chat"
  },
  // #endif
  
  data() {
    return {}
  },
  
  onLoad() {
    // 页面加载时检查插件是否已初始化
    console.log('客服页面加载')
  },
  
  onReady() {
    // 页面就绪
  },
  
  methods: {
    handleBack() {
      uni.navigateBack()
    }
  }
}
</script>

<style scoped>
.customer-service-container {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

/* 聊天插件容器 */
.chatbot-container {
  flex: 1;
  height: 100%;
}

/* 不支持平台提示 */
.unsupported-platform {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 60rpx;
  background: white;
}

.tip-icon {
  font-size: 120rpx;
  margin-bottom: 40rpx;
}

.tip-text {
  font-size: 32rpx;
  color: #666;
  text-align: center;
  margin-bottom: 60rpx;
}

.back-btn {
  background: #07C160;
  color: white;
  border: none;
  border-radius: 50rpx;
  padding: 20rpx 60rpx;
  font-size: 30rpx;
}
</style>